<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-row :gutter="20">
      <el-col :span="18">
        <el-card>
          <h1 style="color: orange;text-align: center">{{c.title}}</h1>
          <p style="text-align: center;font-size: 12px;color: #666">
            作者:{{c.nickname}} | 发布时间:{{c.createTime}}| 阅读次数:{{c.viewCount}}
          </p>
          <hr>
          <div v-if="c.type!=2">
            <el-card>
              <b style="color:#0aa1ed;">摘要:</b>
              {{c.brief}}
            </el-card>
            <p v-html="c.content"></p>
          </div>
          <div v-else>
            <video style="width: 100%"
                   :src="BASE_URL+c.videoUrl"
                   controls type="video/mp4">
            </video>
          </div>
        </el-card>
        <!--    评论相关开始    -->
        <el-card style="margin-top: 20px">
          <p>发一条友善的评论</p>
          <hr>
          <el-row>
            <el-col :span="22">
              <el-input v-model="comment.content" placeholder="请输入评论的内容"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button @click="postComment">发布</el-button>
            </el-col>
          </el-row>
          <!--      评论列表    -->
          <el-row style="margin: 20px" v-for="item in commentArr">
            <el-col :span="2">
              <el-avatar :src="BASE_URL+item.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="22">
              <p style="color: orange;font-weight: bold;margin: 0">{{ item.nickname }}:</p>
              <p style="margin: 5px 0">{{item.content}}</p>
              <p style="color: #666;font-size: 12px">{{item.createTime}}</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card>
          <div id="head_div"></div>
          <div style="text-align: center;position: relative;top: -45px">
            <img :src="BASE_URL+c.userImgUrl" style="width: 90px;height: 90px;
          border: 5px solid white;border-radius: 90px">
            <p style="font-size: 20px;font-weight: bold;margin: 0">{{ c.nickname }}</p>
            <el-icon><Edit/></el-icon>本文作者<br>
            <el-icon><Clock/></el-icon>{{c.createTime}}
          </div>
<!--      作者其他文章    -->
        </el-card>
        <el-card style="margin: 10px 0">
          <h3>作者其他文章</h3>
          <hr>
          <el-row v-for="item in otherArr" :gutter="20" style="padding-top: 20px">
            <el-col :span="10">
              <img :src="BASE_URL+item.imgUrl" style="width: 100%;height: 70px">
            </el-col>
            <el-col :span="14" >
<!--         javascript:void(0)禁用超链接跳转     -->
             <a href="javascript:void(0)" @click="detail(item.id)" style="text-decoration: none">
                <p  class="title_p">{{ item.title }}</p>
             </a>
              <el-icon ><Clock/></el-icon>
              <span style="font-size: 15px;color: #666;">{{item.createTime}}</span>
            </el-col>
          </el-row>
        </el-card>
<!--    作者其他文章    -->
        <el-card style="margin: 10px 0">
          <h3>热门文章</h3>
          <hr>
          <el-row v-for="item in hotArr" :gutter="20" style="padding-top: 20px">
            <el-col :span="10">
              <a href="javascript:void(0)" @click="detail(item.id)">
              <img :src="BASE_URL+item.imgUrl" style="width: 100%;height: 70px">
              </a>
            </el-col>
            <el-col :span="14" >
              <a href="javascript:void(0)" @click="detail(item.id)">
                <p class="title_p">{{item.title}}</p>
              </a>

              <el-icon ><Clock/></el-icon>
              <span style="font-size: 15px;color: #666;">{{item.createTime}}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import router from "@/router";

const c=ref({});//当前文章的全部内容
const otherArr=ref([]);
const hotArr=ref([]);

const comment=ref({content:''})
const postComment=()=>{
  if (comment.value.content.trim()==''){
    alert("评论内容不能为空")
    return;
  }

  let user=getUser();
  if (user==null){
    alert('请先登录')
    router.push('/login')
    return;
  }

  comment.value.userId=user.id//设置当前登录的用户id 为评论作者的id
  comment.value.contentId=c.value.id;//把文章的id装进评论对象中
  let data=qs.stringify(comment.value);
  //发出请求
  axios.post(BASE_URL+'/v1/comments/add-new',data)
    .then((response)=>{
      if (response.data.code==1){
        alert("评论成功!")
        //获取评论
        loadComments(c.value.id);
      }
    })

}

const commentArr=ref([]);
/*请求当前文章的相关评论*/
const loadComments=(id)=>{
  //请求当前文章的相关评论
  axios.get(BASE_URL+'/v1/comments/'+id)
    .then((response)=>{
      if (response.data.code==1){
        commentArr.value=response.data.data;
      }
    })
}

const detail=(id)=>{
  router.push('/detail?id='+id) //修改地址栏中的地址
  loadComments(id);//加载评论
  axios.get(BASE_URL+"/v1/contents/"+id+"/detail")
      .then((response)=>{
        if (response.data.code==1){
          c.value=response.data.data;
          //通过作者id发出请求获取作者修改内容 c.value.userId
          //通过写出请求的代码
          axios.get(BASE_URL+"/v1/contents/"+c.value.userId+"/"+id+"/other")
              .then((response)=>{
                if (response.data.code=1){
                  otherArr.value=response.data.data;
                }
              })
        }
      })
}
onMounted(()=>{
  let id=new URLSearchParams(location.search).get('id');
  //请求当前文章的评论
  loadComments(id);
  detail(id);

  //发出热门的请求
  axios.get(BASE_URL+"/v1/contents/0/"+id+"/other")
    .then((response)=>{
      if (response.data.code=1){
        hotArr.value=response.data.data;
      }
    })
})
</script>

<style scoped>
#head_div{
  height: 90px;
  background-image: url("/public/imgs/avarbg.jpg");
}
.title_p{
  height: 40px;
  overflow: hidden;/*设置不显示*/
  /*设置序省略号修改样式*/
  display: -webkit-box;
  -webkit-line-clamp:2;/*设置行数*/
  -webkit-align-orient:vertical;/*纵向*/
  height: 40px;
  margin: 0;
}
</style>